<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>test - jquery.pagination.js</title>
		<link href="css/jquery.pagination.css" rel="stylesheet" />
		<script src="../jquery练习/js/jquery.min.js"></script>
		<script src="js/jquery.pagination-1.2.7.min.js"></script>
		<style>
			body {
				font-family: 'Microsoft YaHei';
			}
		</style>
	</head>

	<body>
		<div style="width:1000px; margin:0 auto;">
			<header>
				<h1> jquery pagination plugin</h1>
			</header>
			<section id="demo">
				<h4>default demo</h4>
				<div id="page" class="m-pagination"></div>
				<div id="eventLog"></div>
			</section>
		</div>
		<script>
			$("#page").page({
				debug: true,
				showInfo: true,
				showJump: true,
				showPageSizes: true,
				remote: {
					url: 'data.json',
					success: function(data) {
						$("#eventLog").append(' remote callback : ' + JSON.stringify(data) + '<br />');
					}
				}
			});

			$("#page").on("pageClicked", function(event, pageIndex) {
				$("#eventLog").append('EventName = pageClicked , pageIndex = ' + pageIndex + '<br />');
			}).on('jumpClicked', function(event, pageIndex) {
				$("#eventLog").append('EventName = jumpClicked , pageIndex = ' + pageIndex + '<br />');
			}).on('pageSizeChanged', function(event, pageSize) {
				$("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + pageSize + '<br />');
			});
		</script>
	</body>

</html>